<template>
  <div>
    <br />
    <div v-for="(item, index) in formList" :key="'formList' + index">
      <span>{{ item.xzdate }}</span>
      <span>{{ item.xzsec }}</span>
      <span>时间唯一值{{ item.time }}</span>
      <el-button type="warning" plain @click="changeClick(item)"
        >修改</el-button
      >
    </div>
    <el-button type="warning" plain @click="addClick">新增</el-button>
    <!-- <el-button type="warning" plain @click="changeClick">修改</el-button> -->
    <!-- 弹出新增 -->
    <el-dialog
      title="新增设备信息"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="设备编号" prop="xzdate">
          <el-input v-model.trim="form.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>

        <el-form-item label="设备描述" prop="xzsec">
          <el-input
            v-model.trim="form.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm('form')"> 确定</el-button>
      <el-button @click="cancelxz('add')">取 消</el-button>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog
      title="修改设备信息"
      :visible.sync="dialogFormChange"
      width="30%"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="设备编号">
          <el-input v-model.trim="form.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>
        <el-form-item label="设备描述">
          <el-input
            v-model.trim="form.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="changeForm('form')"> 确定</el-button>
        <el-button @click="cancelxz('update')">取 消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formList: [
        {
          xzdate: "1",
          xzsec: "2",
          time: new Date().getTime(),
        },
      ],
      //弹出新增表单
      form: {
        xzdate: "",
        xzsec: "",
      },
      rules: {
        xzdate: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
          {
            min: 1,
            max: 10,
            message: "长度在1到10个字符",
          },
        ],
        xzsec: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
        xgdate: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
          {
            min: 1,
            max: 10,
            message: "长度在1到10个字符",
          },
        ],
        xgsec: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
      },
      //设置的弹出新增窗口
      dialogFormVisible: false,
      dialogFormChange: false,
      update_item: null,
    };
  },
  methods: {
    // 新增
    addClick() {
      //复制两份form
      this.dialogFormVisible = true;
    },
    //修改
    changeClick(item) {
      this.update_item = item;
      this.form.xzdate = item.xzdate;
      this.form.xzsec = item.xzsec;
      this.dialogFormChange = true;
    },
    //新增  确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formList.push({
            ...JSON.parse(JSON.stringify(this.form)),
            time: new Date().getTime(),
          });
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
    //修改  确定按钮
    changeForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let obj = this.formList.find((res) => {
            return res.time === this.update_item.time;
          });
          obj.xzdate = this.form.xzdate;
          obj.xzsec = this.form.xzsec;

          this.dialogFormChange = false;
        } else {
          return false;
        }
      });
    },
    //取消
    cancelxz(type) {
      this.$refs.form.resetFields(); //移除校验结果并重置字段值
      this.form = {
        // 重置表单
        xzdate: "",
        xzsec: "",
      };
      if (type === "add") {
        // 判断是否 是 新增取消 还是 修改取消
        this.dialogFormVisible = false;
      }
      if (type === "update") {
        this.dialogFormChange = false;
      }
    },
  },
};
</script>
<style></style>
